<template>
  <div class="channel-edit">
    <!--让它格子线消失:border="false"  --> 
     <!-- // 注意编辑按钮，没有用插槽就是默认，使用的是默认插槽default，默认插槽控制的是右侧内容 -->
    <van-cell :border="false">
      <div slot="title" class="title-text">我的频道</div>
     
      <van-button size="mini" round type="danger" 
      class="edit-btn"
      plain @click="isEdit=!isEdit">{{ isEdit ? '完成' : '编辑' }}</van-button>
    </van-cell>
    <van-grid :gutter="10" class="my-grid">
     <!--  <van-grid-item class="grid-item"
        v-for="value in 8" :key="value" text="文字" icon="clear"/> -->
    <van-grid-item class="grid-item" v-for="(channel,index) in myChannels"
    :key="index" @click="onQiehuanLove(channel,index)">
    <!-- isEdit && !fiexdChannels.includes(channel.id),第一个是0,当是推荐的时候id也是0,取反false -->
       <van-icon
          v-show="isEdit && !fiexdChannels.includes(channel.id)"
          slot="icon"
          name="clear"
        ></van-icon>
    <span
          class="text"
          :class="{ active: index === active }"
          slot="text">{{ channel.name }}
    </span>

    </van-grid-item>
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell :border="false">
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <!-- // 沟壑,间隙 -->
    <van-grid :gutter="10" class='recommend-grid' >  
      <van-grid-item  class="grid-item"
         v-for="(channel, index) in reChannels"
        :key="index"
        icon="plus"
        :text="channel.name"
         @click="onAddChannel(channel)"
      />
    </van-grid>
    <!-- /频道推荐 -->
  </div>
</template>

<script>
import {getAllChannels,addUserChannel,deleteUserChannel} from '@/api/channel'
import {mapState} from 'vuex'
// from '@/utils/storage'
import {setItem} from '@/utils/storage.js'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    myChannels:{
      type:Array,
      required:true
    },
     active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allC:[],
      isEdit:false,
       fiexdChannels: [0] // 固定频道，不允许删除
    }
  },
  computed: {
    ...mapState(['user']),
    // reChannels(){
    //   const channels = []
    //   this.allC.forEach(v => {
    //     const ret = this.myChannels.find(myChannel => { //在我的频道中查找是否有此频道
    //        return myChannel.id === v.id
    //     })

    //     // 如果不存在，放入空数组
    //     if (!ret) {
    //         channels.push(v)
    //     }
    //   });
    //    return channels
    // }
     reChannels(){
      return this.allC.filter(v=>{
        return !this.myChannels.find(m=>m.id===v.id)
      })
      //   return this.allC.filter(v=>!this.myChannels.find(m=>m.id===v.id)
      // )
     }

  },
  watch: {},
 created () {
 this.loadAllChannels()
 },
  mounted () {},
  methods: {
       async loadAllChannels () {
      try {
        const { data } = await getAllChannels()
        this.allC = data.data.channels
      } catch (err) {
        this.$toast('数据获取失败')
      }
    },
   async onAddChannel(channel){
       this.myChannels.push(channel)
       if(this.user){
        try {
          await addUserChannel({
            id: channel.id,
            seq: this.myChannels.length // 序号
          })
          // this.$toast('添加成功')
        } catch (err) {
          console.log(err);
          this.$toast('添加失败')
        }
       }else{
        console.log(this.myChannels);
        // 进行覆盖
        setItem('TOUTIAO_CHANNELS', this.myChannels)
       }
    },
   async delect (value){
    try {
      if (this.user) {
        await deleteUserChannel(value.id)
      } else {
         setItem('TOUTIAO_CHANNELS', this.myChannels)

        
      }
     
    } catch (err) {
      console.log(err);
      this.$toast('删除频道失败，稍后重试')
    }
    

    },
    onQiehuanLove(channel,index){
      //编辑状态,出现小叉,进行删除
      if(this.isEdit){
        if(this.fiexdChannels.includes(channel.id)){
          return

        } 
       
        this.myChannels.splice(index,1)
        this.delect(channel)

        // 删除前面高亮的就会把高亮的提前
        if(index<=this.active){
          // 没有改值，这是把this.active-1传给父亲
          this.$emit('updateActive',this.active - 1,true)
        }
       

      }
      //非编辑状态,点击,进行切换
      else{
        this.$emit('updateActive',index,false)
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  padding: 85px 0;

  .title-text {
    font-size: 32px;
    color: #333333;
  }

  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }

  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f4f5f6;
      .van-grid-item__text, .text {
        font-size: 28px;
        color: #222;
        margin-top: 0;
      }
      .active {
        color: red;
      }
      .van-grid-item__icon-wrapper {
        position: unset;
      }
    }
  }

  /deep/ .my-grid {
    .grid-item {
      .van-icon-clear {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: #cacaca;
        z-index: 2;
      }
    }
  }

  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
